<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="110px">
            <el-form-item label="加微时间">
                <el-date-picker
                    v-model="dateRange"
                    type="datetimerange"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :default-time="['00:00:00', '23:59:59']"
                    align="right">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="用户昵称" prop="name">
                <el-input v-model="queryParams.name" placeholder="请输入用户昵称" clearable style="width: 160px" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row>
            <el-col class="bg-bule" :span="10">
                <span>注：本系统社群老师为老师账户名称，一个社群老师可能有多个账户。</span>
                <el-button type="primary" icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
            </el-col>
        </el-row>
      
        <el-table v-loading="loading" :data="orderList">
            <el-table-column label="投放订单编号" align="center" prop="code"  :show-overflow-tooltip="true" />
            <el-table-column label="用户昵称" align="center" prop="name" :show-overflow-tooltip="true" />
            <el-table-column label="用户手机号" align="center" prop="phone" />
            <el-table-column label="社群老师" align="center" prop="wechat_name" />
            <!-- <el-table-column label="备注" align="center" prop="channel_title" width="200" :show-overflow-tooltip="true" /> -->
            <el-table-column label="社群老师后台账户" align="center" prop="teacher_phone" :show-overflow-tooltip="true" />
            <el-table-column label="加微日期" align="center" prop="wechat_date" />
            <el-table-column label="加微时间" align="center" prop="wechat_date_time" />
            <el-table-column label="用户ID" align="center" prop="external_id" :show-overflow-tooltip="true" />
        </el-table>

        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.page"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />
    </div>
</template>

<script>
import { getList } from "@/api/financial/adver";
import { getCurDate } from "@/utils/index"

export default {
    data() {
        return {
            loading: true,	// 遮罩层
            queryParams: { 	// 查询参数
                page: 1,
                pageSize: 20,
            },
            dateRange: [],	// 加微时间范围 
            orderList:[],
            total:0,
        };
    },
    created() {
        const pastDate = new Date();
        pastDate.setDate(pastDate.getDate() - 30);
        let start = pastDate.toISOString().split('T')[0]
        this.dateRange = [start + ' 00:00:00',getCurDate('-') + ' 23:59:59']
        this.getList();
    },
    methods: {
        getList() {
            this.loading = true;
            //加微时间处理
            this.dateRange = Array.isArray(this.dateRange) ? this.dateRange : [];
            this.queryParams.wechat_time_start = this.dateRange[0];
            this.queryParams.wechat_time_end = this.dateRange[1];
            getList(this.queryParams).then(res => {
                this.orderList = res.data.data
                this.total = res.data.total;
                this.loading = false;
            });
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.page = 1;
            this.getList();
        },
         /** 重置按钮操作 */
        resetQuery() {
            this.queryParams = {
                page: 1,
                pageSize: 20,
            },
            this.dateRange = []
            this.handleQuery();
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('financial/lunch/exportExcel', {
                ...this.queryParams
            }, `财务管理投放订单查询${getCurDate('')}.xlsx`)
        },
     
    }
};
</script>

<style scoped>
  .bg-bule{background: #ecf5ff;padding: 10px;border: 1px sliod #409eff;margin-bottom: 20px;}
  .bg-bule .el-button{margin-right: 10px;float: right;}
</style>